import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react'
import { Row, Col, Segmented, Button } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import Modal from './components/Model'
const PreApplition = (props, ref) => {
  const {
    defaultList = [],
    canHandlePreApplyInfoFlag
  } = props
  const [stage, setStage] = useState('')
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)

  useImperativeHandle(ref, () => {
    return {
      getPre: () => {
        return data.map(item => {
          const { mainAdminList = [], helpAdminIdList = [], stage } = item
          return {
            stage: stage,
            mainAdminId: mainAdminList.map(item => { return item.id }).toString(),
            helpAdminIdList: helpAdminIdList.map(item => { return item.id })
          }
        })
      }
    }
  })
  useEffect(() => {
    console.log(defaultList, '默认数组')
    setStage(defaultList[0].value)
    setData(defaultList.map(item => {
      const { value } = item
      return {
        ...item,
        stage: value
      }
    }))
  }, [])
  const setDataInfo = () => {
    return data.reduce((item, index) => {
      const { mainAdminList } = index
      if (index.stage === stage && mainAdminList) {
        return mainAdminList
      } else {
        return item
      }

    }, [])
  }
  const setDataFInfo = () => {
    return data.reduce((item, index) => {
      const { helpAdminIdList } = index
      if (index.stage === stage && helpAdminIdList) {
        return helpAdminIdList
      } else {
        return item
      }

    }, [])
  }
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '状态',
      dataIndex: 'applyStatus',
      render: (e) => {
        return {
          0: '待审核', 1: '审核通过'
        }[e]
      }
    },
  ]
  const onChange = (e, detail) => {
    const { stage, type } = detail
    if (type === 'admin') {
      setData(data.map(item => {
        if (stage === item.stage) {
          return {
            ...item,
            mainAdminList: e
          }
        }
        else {
          return {
            ...item
          }
        }

      }))
    } else {
      setData(data.map(item => {
        if (stage === item.stage) {
          return {
            ...item,
            helpAdminIdList: e
          }
        }
        else {
          return {
            ...item
          }
        }

      }))
    }
  }
  const memo = useMemo(() => {
    return <Row gutter={[12, 24]}>
      <Col style={{ textAlign: 'right', paddingRight: 4 }} span={6}>阶段预设置：</Col>
      <Col span={18}>
        <Segmented
          value={
            stage
          }
          onChange={(e) => {
            setStage(e)
          }}
          options={defaultList}></Segmented>
      </Col>
      <Col offset={3} span={16}>
        <TableDataBlock
          cardProps={{
            title: '主负责', extra: <Button disabled={canHandlePreApplyInfoFlag === '0'} onClick={() => {
              setVisible({
                show: true, detail: {
                  stage, type: 'admin', list: setDataInfo(), disabledList: setDataFInfo()
                }
              })
            }}
            >设置</Button>
          }}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={setDataInfo()}
        ></TableDataBlock>
      </Col>
      <Col span={16} offset={3}>
        <TableDataBlock
          cardProps={{
            title: '辅助负责', extra: <Button onClick={() => {
              setVisible({
                show: true, detail: {
                  stage, type: 'user', list: setDataFInfo(), disabledList: setDataInfo(),
                }
              })
            }}>设置</Button>
          }}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={setDataFInfo()}
        ></TableDataBlock>
      </Col>
      <Modal onChange={(e, detail) => onChange(e, detail)} visible={visible} onClose={() => {
        setVisible(false)
      }}></Modal>
    </Row>
  }, [stage, data, visible, canHandlePreApplyInfoFlag, defaultList])
  return memo

}
export default forwardRef(PreApplition) 